<template>
    <div class="page-container" v-loading="loading">
        <div class="page-filter-option mb-3">
            <el-form :inline="true" :model="filterOption" class="flex flex-wrap">
                <el-form-item>
                    <el-input :placeholder="$t('form.inputPlaceholder')" suffix-icon="el-icon-search" class="input-search-select"
                              v-model="filterOption.keyword" @change="filterChange" clearable>
                        <el-select slot="prepend" v-model="filterOption.keyword_column">
                            <el-option label="UID" value="id"></el-option>
                            <el-option :label="$t('game.user.account_id')" value="account_id"></el-option>
                        </el-select>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <component-page-org-tree-option-check v-model="filterOption.plat_code" @change="filterChange"></component-page-org-tree-option-check>
                </el-form-item>
                <el-form-item class="medium">
                    <el-select :placeholder="$t('game.user.role')" v-model="filterOption.role" @change="filterChange" clearable multiple collapse-tags>
                        <el-option v-for="(item, index) in $t('game.user.roleList')" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="medium">
                    <el-select :placeholder="$t('game.user.access')" v-model="filterOption.access" @change="filterChange" clearable multiple collapse-tags>
                        <el-option v-for="(item, index) in $t('game.user.accessList')" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="filterChange">{{ $t('action.search') }}</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 币种统计 -->
        <div class="bizhon">
            <div class="head">
                <strong>{{ $t('form.balanceTotal') }}</strong>
                <div style="cursor: pointer;" @click="isShowAll=!isShowAll">
                    <small data-v-4e52c65e="">{{ $t('action.more') }}</small>
                    <i :class="[isShowAll?'':' is-reverse','el-icon-arrow-up']"></i>
                </div>
            </div>
            <div  :class="[isShowAll?'currencyHeghit':' ','currency']" >
                <div v-for="(item,index) in currency" class="item-currency">
                    <span class="sp">{{index}}</span>：<span class="">{{numToView(item)}}</span>
                </div>
            </div>
        </div>

        <div class="page-container-inner-fluid flex-auto flex flex-col">
            <component-page-content-resize v-slot="{ content }">
                <el-table style="width: 100%" :height="content.height"
                          :data="dataList"
                          :default-sort="{prop: filterOption.order_column, order: filterOption.order_key}"
                          @sort-change="filterOrderChange"
                          highlight-current-row>
                    <el-table-column min-width="150" label="UID" prop="id" sortable="custom" :sort-orders="['descending', 'ascending']">
                        <template slot-scope="scope">
                            <div v-if="scope.column.property != filterOption.keyword_column">{{ scope.row.id }}</div>
                            <div v-else v-html="$options.filters.hsFilterKeyword(scope.row.id, filterOption.keyword)"></div>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="200" :label="$t('platform.setting.tree.org')" prop="plat_code">
                        <template slot-scope="scope">{{ scope.row.org.name || scope.row.plat_code }}</template>
                    </el-table-column>
                    <el-table-column min-width="200" :label="$t('game.user.account_id')" prop="account_id" fixed="left">
                        <template slot-scope="scope">
                            <div v-if="scope.column.property != filterOption.keyword_column">{{ scope.row.account_id }}</div>
                            <div v-else v-html="$options.filters.hsFilterKeyword(scope.row.account_id, filterOption.keyword)"></div>
                        </template>
                    </el-table-column>
<!--                    <el-table-column min-width="220" :label="$t('game.user.gold')" prop="gold">-->
<!--                        <template slot-scope="scope">-->
<!--                            <div class="truncate" v-if="scope.row.wallet != null && scope.row.wallet.balances != null">-->
<!--                                <el-tag effect="plain" size="mini" type="info" :key="currency"-->
<!--                                        v-for="(number,currency) in scope.row.wallet.balances">-->
<!--                                    {{ currency }}-->
<!--                                    <component-page-numeral :num="number"></component-page-numeral>-->
<!--                                </el-tag>-->
<!--                            </div>-->
<!--                        </template>-->
<!--                    </el-table-column>-->
                    <el-table-column min-width="150" :label="$t('game.user.role')" prop="role">
                        <template slot-scope="scope">
                            <span v-for="bit in scope.row.role">
                                <el-tag effect="plain" size="mini" :type="{1:'info',2:'warning'}[bit] || 'info'">
                                    {{ $t(`game.user.roleList.${bit}`).label || bit }}
                                </el-tag>
                            </span>
                            <span class="operation-options-icon">
                               <i class="el-icon-edit" @click="dialogItemUpdateRole(scope)"></i>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="150" :label="$t('game.user.access')" prop="access">
                        <template slot-scope="scope">
                            <span v-for="bit in scope.row.access">
                                <el-tag effect="plain" size="mini" :type="bit == 1 ? 'info' : 'warning'">
                                    {{ $t(`game.user.accessList.${bit}`).label || bit }}
                                </el-tag>
                            </span>
                            <span class="operation-options-icon">
                               <i class="el-icon-edit" @click="dialogItemUpdateAccess(scope)"></i>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="220" :label="$t('game.user.registration_time')" prop="registration_time" sortable="custom" :sort-orders="['descending', 'ascending']">
                        <template slot-scope="scope">
                            <component-page-timestamp :timestamp="scope.row.registration_time"></component-page-timestamp>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="220" :label="$t('game.user.last_login_time')" prop="last_login_time" sortable="custom" :sort-orders="['descending', 'ascending']">
                        <template slot-scope="scope">
                            <component-page-timestamp :timestamp="scope.row.last_login_time"></component-page-timestamp>
                        </template>
                    </el-table-column>
                    <el-table-column width="100" :label="$t('game.user.operation')" align="right" fixed="right">
                        <template slot-scope="scope">
                            <span class="operation-options-icon">
                                <i class="el-icon-view" @click="drawerItemDetails(scope)"></i>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>
            </component-page-content-resize>
            <div class="text-right p-4">
                <el-pagination background layout="total, sizes, prev, pager, next, jumper"
                               :current-page="filterOption.page"
                               :page-size.sync="filterOption.page_size"
                               :total="dataMeta.total"
                               @size-change="filterChange"
                               @current-change="filterPageChange">
                </el-pagination>
            </div>
        </div>
        <item-update-role :visible.sync="dialog.visible.updateRole" :data="itemCache" @update="getDataList"></item-update-role>
        <item-update-access :visible.sync="dialog.visible.updateAccess" :data="itemCache" @update="getDataList"></item-update-access>
        <item-details :visible.sync="drawer.visible.details" :data="itemCache"></item-details>
    </div>
</template>

<script>
import ItemUpdateRole from './ItemUpdateRole.vue'
import ItemUpdateAccess from './ItemUpdateAccess.vue'
import ItemDetails from './ItemDetails.vue'

export default {
    components: {
        ItemUpdateRole,
        ItemUpdateAccess,
        ItemDetails,
    },
    data() {
        return {
            loading: false,
            filterOption: {
                plat_code: [],
                role: [],
                access: [],
                keyword: '',
                keyword_column: 'account_id',
                page: 1,
                page_size: 30,
                order: 'desc',
                order_key: 'descending',
                order_column: 'registration_time',
            },
            dataMeta: {
                total: 0,
            },
            dataList: [],
            itemCache: {},
            dialog: {
                visible: {
                    updateRole: false,
                    updateAccess: false,
                }
            },
            drawer: {
                visible: {
                    details: false,
                }
            },
            currency:null, //币种统计
            format:"",
            isShowAll:true, //是否显示全部
        }
    },
    created() {
        // 初始化数据
        this.filterChange();
    },
    methods: {
        numToView(num) {
            return this.$store.getters['config/filterNumeral'](num, this.format || {thousandSeparated: true,mantissa:2});
        },
        clearFilterOption() {
            this.filterOption.page = 1;
        },
        filterChange() {
            this.clearFilterOption();
            this.getDataList();
        },
        filterPageChange(page) {
            this.filterOption.page = page;
            this.getDataList();
        },
        filterOrderChange(scope) {
            this.clearFilterOption();
            this.filterOption.order = scope.order == 'ascending' ? 'asc' : 'desc';
            this.filterOption.order_key = scope.order;
            this.filterOption.order_column = scope.prop;
            this.getDataList();
        },
        getDataList() {
            this.loading = true;
            axios.get('/game/user/getList', {
                params: this.filterOption
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dataMeta = response.data.resp_data.meta;
                    this.dataList = response.data.resp_data.data;
                    this.currency=response.data.resp_data.stats
                } else {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                }
                this.loading = false;
            })
        },
        // 显示模态框（编辑）[Role]
        dialogItemUpdateRole(scope) {
            // 缓存数据
            this.itemCache = scope.row;
            // 显示模态框
            this.dialog.visible.updateRole = true;
        },
        // 显示模态框（编辑）[Access]
        dialogItemUpdateAccess(scope) {
            // 缓存数据
            this.itemCache = scope.row;
            // 显示模态框
            this.dialog.visible.updateAccess = true;
        },
        // 打开抽屉（详情）
        drawerItemDetails(scope) {
            // 缓存数据
            this.itemCache = scope.row;
            // 显示抽屉
            this.drawer.visible.details = true;
        },
    },
}
</script>

<style lang="scss">
    // 币种统计
    .bizhon{
        background-color: #fff;
        border-radius: 10px;
        margin-bottom: 20px;
        padding: 20px;
        padding-bottom: 0;
        .head{
            display: flex;
            justify-content: space-between;
            i{
                color: #C0C4CC;
                font-size: 0.875rem;
                transition: transform 0.3s;
                transform: rotate(180deg);
            }
            .is-reverse{
                transform: rotate(0deg);
            }
        }
        .currency{
            display: flex;
            flex-wrap: wrap;
            font-size: 16px;

            .sp{
                color: #909399;
                margin-right: 6px;
            }
            .item-currency{
                margin-right: 50px;
                margin-bottom: 10px;
            }
            &.currencyHeghit{
                height: 30px;
                overflow: hidden;
            }
        }
    }
</style>
